function Banner(ops){
    // 1.选择元素
    this.goods_list=ops.goods_list;
    // this.img=this.imgbox.children;
    this.li=ops.li;

    this.left=ops.left;
    this.right=ops.right;

    // 创建初始的索引
    this.i=0;       //为什么这里先创建i的初始值
    // 2.完善布局
    this.init();
    // 3.执行绑定事件
    this.addEvent();
}

Banner.prototype.init=function(){
    // 完善布局
    // 根据图片的个数，计算大框的宽度
    // 大框的宽度=图片的个数*单个图片的宽度
console.log(this.li.length);
let n=this.li.length-parseInt(this.li.length/3)+1
    this.goods_list.style.width=this.li.length*this.li[0].offsetWidth+n*13+"px";
    this.goods_list.style.position="absolute";
}

Banner.prototype.addEvent=function(){
    const that=this;
    //绑定事件
    console.log(this.right,this.left)
    this.left.onclick=function(){
        // 4-1.执行计算索引
        that.computedIndex("left");
    }
    this.right.onclick=function(){
        // 4-2.执行计算索引
        that.computedIndex("right");
    }
}
Banner.prototype.computedIndex=function(d){
    //计算索引
    if(d==="left"){
        //左
        console.log("l");
        if(this.i===0){
            this.i=this.li.length-1;
            this.goods_list.style.left=-(this.li[0].offsetWidth)*20+"px";
            this.i--;
        }else{
            this.i--;
        }
        this.i;
    }else{
        //右
        console.log("r")
        //0,2,3,4,0,1,2,3,4~~~~
        if(this.i === this.li.length-1){
            // 无缝轮播2：当索引为最大值后，将索引设置为真正要显示的图片索引
            this.i=1;
            // 无缝轮播3：立即将整个图片框，回归到初始位置
            this.goods_list.style.left=0;
        }else{
            this.i++;

        }
    }
    //5.执行渲染图片
    this.render(3);
}
Banner.prototype.render=function(o){
    //渲染图片
    // console.log(this.i);
    // this.imgbox.style.left=-this.i*this.img[0].offsetWidth+"px";
    console.log(this.i*this.li[0].offsetWidth*o+this.i*26);
    // if(){}
    move(this.goods_list,{
        left:-(this.i*this.li[0].offsetWidth*o+this.i*26)
    });
}

// 通过参数传递要操作的不同的信息
// 实现真正的相同属性不同属性值的对象
// 工厂模式创建对象，最大的特点
// 一定要有参数！！！